<template>
  <article class="media">
    <div class="group-1">
      <div class="media-title" style="font-size:16px;">
        <strong>{{ask.title}}</strong>
      </div>
      <div class="group-2">
        <div class="media-content" style="font-size:14px">
          <span>{{ask.content}}</span>
        </div>
      </div>
      <div class="level is-mobile" style="margin-top:10px">
				<div class="like">
					<button class="button">
						<span class="icon">
							<i class="fas fa-caret-up" style="size:10px"></i>
						</span>
						<span class="like">赞同：{{ask.like}}</span>
					</button>

					<button class="button" style="margin-left:10px">
						<span class="icon">
							<i class="fas fa-caret-down" style="size:10px"></i>
						</span>
					</button>
				</div>
        <div class="more">
					<span class="icon">
						<i class="fas fa-comment"/>
					</span>
					<span style="margin-top:10px">评论：{{ask.comment}}</span>
					<span class="icon">
						<i class="fas fa-star"/>
					</span>
				</div>
      </div>
    </div>
  </article>
</template>
<script>
export default {
    name:"AskPageItem",
    props:["ask"]
}
</script>
<style scoped>
.group-1{
  margin-top:12px;
  margin-left:20px;
  margin-right:20px;
}
.group-2{
  margin-top: 8px;
  color:#808080;
}
.like .button {
  color: #0084ff;
  background-color: rgb(229, 242, 255);
}
.like .button .like {
  font-size: 12px;
}
.more{
  margin-left: 10px;
}
</style>
